<template>
    <div class="login">

        <form class="row g-3">
            <div class="col-md-8">
                <input type="email" class="form-control" id="validationServer01"  :class="{'is-invalid': emailRef.error}" required placeholder="邮箱" v-model="emailRef.val" @blur="emailValidate" autofocus>
                <div id="emailHelp" class="form-text" v-show="!emailRef.error">请输入邮箱号,如1234567890@qq.com</div>
                <div class="invalid-feedback" v-show="emailRef.error">
                {{emailRef.message}}
                </div>
            </div>
            <div class="col-md-8">
                <input type="password" class="form-control" :class="{'is-invalid': passwordRef.error}" id="validationServer02" required placeholder="密码" v-model="passwordRef.val">
                <div id="passwordHelp" class="form-text" v-show="!passwordRef.error">密码至少包含数字和英文，长度6-20</div>
                <div class="invalid-feedback" v-show="passwordRef.error">
                {{passwordRef.message}}
                </div>
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm">
                    <router-link to="/register"><a href="#">去注册</a></router-link>
                    </div>
                    <div class="col-sm">
                    <router-link to="/modify"><a href="#">忘记密码？</a></router-link>
                    </div>
                </div>
            </div>

            <button class="btn btn-primary" @click="login" type="button">登录</button>
            
        </form>

    </div>
</template>

<script lang="ts">
import qs from 'qs'
import axios from 'axios'
import {useStore} from 'vuex'
import { useRouter } from "vue-router";
import { defineComponent, reactive} from 'vue'


//邮箱验证正则表达式
const emailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
// const passwordReg =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

export default defineComponent({
    name: 'login',
    setup() {
        const emailRef = reactive({
            val: '',
            error: false,
            message: '',
        })
        const emailValidate = () => {
            if(emailRef.val === '') {
                emailRef.error = true
                emailRef.message = '内容不能为空！'
            } else if(!emailReg.test(emailRef.val) ) {
                emailRef.error = true
                emailRef.message = '邮箱输入错误！'
            } else {
                emailRef.error = false
            }
        }

        const passwordRef = reactive({
            val: '',
            error: false,
            message: '',
        })
        // const passwordValidate = () => {
        //     if(passwordRef.val === '') {
        //         passwordRef.error = true
        //         passwordRef.message = '内容不能为空！'
        //     } else if(!passwordReg.test(passwordRef.val) ) {
        //         passwordRef.error = true
        //         passwordRef.message = '密码错误！'
        //     } else {
        //         passwordRef.error = false
        //     }
        // }

        const store = useStore()
       
        const router = useRouter()
        const login = () => {
            // console.log("111")
            let postData = qs.stringify({
                email: emailRef.val,
                password: passwordRef.val,
            })
            axios.post(`/api/user/login`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((res) => {

                if (res.status === 200) {
                    alert(res.data)
                    console.log(res.data)
                    // if(store.state.token === '') {
                    store.commit('set', emailRef.val)
                    localStorage.setItem('login',store.state.login)
                    localStorage.setItem('name',store.state.user)
                    if(res.data === "登录成功" || res.data === "已经登录") {
                    // if(res.data === "登录成功") {
                        // router.go(-1)
                        if(store.state.router === '/register') {
                            router.push('/')
                            store.commit('setRouter','')
                        } else {
                            router.go(-1)
                        }
                        
                    }
                    
                }
            })
        }

        return {
            emailRef,
            emailValidate,
            passwordRef,
            login,
        }
    },
})
</script>

<style lang="stylus" scoped>
.login
  form 
    width 60%
    margin-left 20%
    margin-top 1%
    height 30rem
    padding-top 80px
    border 1px #ccc solid 
    border-radius 20px
    box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
    background-color #fff
    .col-md-8
      .form-control
        margin-left 25%
      .form-text
        width 60%
        margin-left 25%
        text-align left
        font-size 16px
        color #ccc 
      .invalid-feedback
        margin-left 25%
        text-align left
    .container
      font-size 18px
      margin-top -40px
      color #ccc 
      a 
        color #ccc
        text-decoration none
      a:hover
        color #0d6efd
    .btn 
      width 30%
      height 50px
      margin-left 35%
</style>
